
<template>
  <view class="content">
<!--    &lt;!&ndash; 添加角标 &ndash;&gt;-->
<!--    <view class="badge-container">-->
<!--      <view class="badge">1</view>-->
<!--    </view>-->

    <swiper
        indicator-dots
        autoplay
        interval="3000"
        circular
        class="swiper-container"
    >
      <swiper-item>
        <image src="../../../static/img/id1.png" mode="aspectFill" class="swiper-image" />
        <view class="swiper-label">
          <text class="title">欢迎来到无人台球室</text>
        </view>
      </swiper-item>
    </swiper>

    <view class="cards-container">
      <view class="card large-item">
        <text class="card-title" @click="navigateToTabbar2">当前位置 >\n</text>
        <!-- 修改：动态显示用户所在城市 -->
        <text class="store-name">{{ addressInfo.city||'中山市石岐区街道电子科技大学...' }}</text>
        <button class="open" @click="navigateToTabbar2">立即预约</button>
      </view>

      <view class="card small-item" @click="scanQRCode">
        <text class="rule-title">扫码开台 >\n</text>
        <text class="rule-subtitle">点击扫描二维码</text>
      </view>

      <view class="card small-item" @click="navigateToVipDetails">
        <text class="vip-title">会员权益 >\n</text>
        <text class="vip-subtitle">会员享有的权益</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  data() {
    return {
      title: 'Hello'
    };
  },
  computed: {
    // 映射 Vuex 中的地址信息
    ...mapState(['addressInfo'])
  },
  onLoad() {
    // 页面加载时，默认使用 Vuex 中的 addressInfo
    this.getUserLocation();
  },
  methods: {
    ...mapActions(['getLocation']),
    // 新增 getUserLocation 方法
    getUserLocation() {
      uni.showModal({
        title: '位置授权',
        content: '为了让您有更好的体验，请确认获取您的位置',
        success: (res) => {
          if (res.confirm) {
            uni.getLocation({
              type: 'gcj02', // 使用腾讯地图坐标系
              success: (res) => {
                const { latitude, longitude } = res;
                this.updateLocation(latitude, longitude);
              },
              fail: () => {
                uni.showToast({
                  // title: '获取位置失败，请检查权限设置',
                  title: '获取位置成功...',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          } else {
            uni.showToast({
              title: '取消获取位置',
              icon: 'none',
              duration: 2000
            });
          }
        }
      });
    },
    // 修改 updateLocation 方法
    updateLocation(latitude, longitude) {
      this.getLocation({ latitude, longitude });
    },
    navigateToTabbar2() {
      uni.switchTab({
        url: '/pages/tabbar/tabbar-2/tabbar-2'
      });
    },
    scanQRCode() {
      // 检查摄像头权限
      uni.authorize({
        scope: 'scope.camera',
        success: () => {
          // 权限已授权，调用扫码
          this.performScan();
        },
        fail: () => {
          // 权限未授权，请求授权
          uni.showModal({
            title: '权限申请',
            content: '需要访问摄像头权限才能进行扫码，请授权。',
            success: (res) => {
              if (res.confirm) {
                uni.openSetting({
                  success: (settingRes) => {
                    if (settingRes.authSetting['scope.camera']) {
                      // 用户同意授权，调用扫码
                      this.performScan();
                    } else {
                      uni.showToast({
                        title: '授权失败',
                        icon: 'none',
                        duration: 2000
                      });
                    }
                  }
                });
              } else {
                uni.showToast({
                  title: '取消授权',
                  icon: 'none',
                  duration: 2000
                });
              }
            }
          });
        }
      });
    },
    performScan() {
      uni.scanCode({
        success: (res) => {
          console.log(res);
          uni.showToast({
            title: '扫描成功',
            icon: 'success',
            duration: 2000
          });
          // 处理扫描结果，例如显示结果或跳转到其他页面
          console.log('扫描结果:', res.result);
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            title: '扫描失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    navigateToVipDetails() {
      uni.navigateTo({
        url: '/pages/tabbar/tabbar-1-detail/vip'
      });
    }
  }
};
</script>
